<template>
  <div class="app-container calendar-list-container" element-loading-text="正在导出数据">
  <!-- filter 条件查询 -->

  <div class="filter-container">
      <div style="display:flex;margin-bottom: 10px;" >
        <el-select
        clearable
        v-model="param.workCenter" 
        placeholder="请选择工作中心" 
        @focus="getCenterList" 
        style="margin-right:15px;width: 150px">
            <el-option 
            :value="item" 
            :label="item" v-for="(item,index) in this.centerList" 
            :key="index"/>
        </el-select>
  
        <el-select
        clearable
        filterable
        v-model="param.sectionNo" 
        placeholder="请选择线体名称" 
        style="margin-right:15px;width: 150px">
            <el-option 
            :value="item.sectionNo" 
            :label="item.sectionAbbreviation" v-for="(item,index) in list" 
            :key="index"/>
        </el-select>
          
        <el-input 
              @keyup.enter.native="getData"
              clearable
              style="margin-right: 15px;width: 150px"
              v-model="param.clientNumber"
              placeholder="客户编码"
          ></el-input>

        <el-date-picker
        v-model="param.years"
        type="year"
        placeholder="请选择年"
        value-format="yyyy"
        style="margin-right:15px;width: 100px">
        </el-date-picker>
        
        <el-date-picker
        v-model="param.month"
        type="month"
        value-format="MM"
        format="MM"
        placeholder="请选择月"
        style="margin-right:15px;width: 100px">
        </el-date-picker>

          <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
          <el-button
              type="button"
              v-waves
              class="el-button el-button--warning"
              @click="cancelSubmit"
          >
          重置</el-button>
      </div>
  </div>
  <div style="display: flex;">  
    <div ref="left" style="width: 800px; height: 300px;"></div>
    <div ref="right" style="width: 800px; height: 300px;"></div>  
  </div>
  <div ref="bottom" style="margin-top: 10px; width: 1500px; height: 400px;"></div>  
</div>
</template>

<script>
import * as echarts from 'echarts'
import { getCenter } from '@/api/workSection.js'
import { chartData } from '@/api/problem.js'
import { getDicts } from '@/api/dict-data.js'
export default {
  name: 'dataTrend',
  props: {
    // 带有默认值的数组
    list: {
      type: Array,
      default: () => [] // 对象/数组的默认值必须是函数
    }
  },
  data () {
      return {
          param: {
            workCenter: 'EMS总装车间',                      
            clientNumber: '',
            sectionNo: '',
            years: this.getCurrentYear(),        //年
            month: this.getCurrentMonth(),       //月   
          },
          centerList:[],
          userInfo: this.$store.state.user.userInfo,
          yearsList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          leftList: [],
          rightList: [],
          bottomList: [],
          days: [],       // 一个月的天数
          leftT: null,
          rightT: null,
          bottomT: null,
          ppmList: []     // ppm列表
      }
  },
  computed: {
    inputWid() {
      return function (value) {
          if(!value || (value.length <= 10)){
            return '150px'
          } else {
            return (150 + (String(value).length-10)*6) + 'px'
          }
      }
    }
  },
  methods: {
    // 获取当前年份
    getCurrentYear() {
        return new Date().getFullYear().toString();
      },
      // 获取当前月份
      getCurrentMonth() {
        const month = new Date().getMonth() + 1;
        return month < 10 ? '0' + month : month.toString();
      },
     // 获取工作中心
     async getCenterList() {
          let {data} = await getCenter()
          this.centerList = data
        },
      getData(){
        this.handleFilter()
      },
      async handleFilter() {
        let query = {}
        if(this.param.workCenter){ query.workCenter = this.param.workCenter}
        if(this.param.years){ query.years = this.param.years}
        if(this.param.month){ query.month = this.param.month}
        if(this.param.clientNumber){ query.clientNumber = this.param.clientNumber}
        if(this.param.sectionNo){ query.sectionNo = this.param.sectionNo}
        let res = await chartData(query)
        if(res.code != 1 || !res.data.series){
          this.leftList = []
          this.rightList = []
          this.days = []
          this.bottomList = []
        } else{
          res.data.series.forEach(item =>{
            if(item.name === '检验台数'){
              item.type = 'bar'
            }else{
              item.yAxisIndex = 1,
              item.type = 'line'
            }
            item.tooltip = {
              valueFormatter: function (value) {
                return value;
              }
            }
          })
          this.leftList = res.data.series.filter(item => {
            if(item.name === '检验台数' || item.name === 'PPM实际值'){
              return item
            }else if(item.name === 'PPM目标值'){
              item.data = this.ppmList
              return item
            }
          })
          this.rightList = res.data.series.filter(item => {
            if(item.name === 'FQC问题数' || item.name === 'OQC问题数'){
              return item
            }
          })
          this.days = res.data.day
          res.data.daySeries.forEach(item =>{
            if(item.name === '检验台数'){
              item.type = 'bar'
            }else{
              item.yAxisIndex = 1,
              item.type = 'line'
            }
            item.tooltip = {
              valueFormatter: function (value) {
                return value;
              }
            }
          })
          this.bottomList = res.data.daySeries
        }
        // 左侧图
        this.leftEcharts()
        // 右侧图
        this.rightEcharts()
        // 下面的图
        this.bottomEcharts()
      },
      cancelSubmit(){
          this.param = {     
          }
      },
      // 左图
      leftEcharts(){
        this.leftT = echarts.init(this.$refs.left)
        // 基于准备好的dom，初始化echarts实例
         const option = {
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'cross',
               crossStyle: {
                 color: '#999'
               }
             }
           },
           grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
           },
           legend: {
             data: ['检验台数', 'PPM目标值', 'PPM实际值']
           },
           xAxis: [
             {
               type: 'category',
               data: this.yearsList,
               axisPointer: {
                 type: 'shadow'
               }
             }
           ],
           yAxis: [
             {
               type: 'value',
               name: '',
               axisLabel: {
                 formatter: '{value} '
               }
             },
             {
               type: 'value', 
               name: '',
               axisLabel: {
                 formatter: '{value}'
               }
             }
           ],
           series: this.leftList
         };
          this.leftT.setOption(option,true)
          },
       // 右图
       rightEcharts(){
          this.rightT = echarts.init(this.$refs.right);  
         // 指定图表的配置项和数据  
         const option = {
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'cross',
               crossStyle: {
                 color: '#999'
               }
             }
           },
           grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
           },
           legend: {
             data: ['FQC问题数', 'OQC问题数']
           },
           xAxis: [
             {
               type: 'category',
               data: this.yearsList,
               axisPointer: {
                 type: 'shadow'
               }
             }
           ],
           yAxis: [
             {
               type: 'value',
               name: '',
               axisLabel: {
                 formatter: '{value} '
               }
             },
             {
               type: 'value',
               name: '',
             }
           ],
           series: this.rightList
         };
        // 使用刚指定的配置项和数据显示图表。  
        this.rightT.setOption(option,true)
      },
      // 下图
      bottomEcharts(){
        this.bottomT = echarts.init(this.$refs.bottom)
        // 基于准备好的dom，初始化echarts实例
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: ['检验台数', 'FQC问题数', 'OQC问题数']
          },
          xAxis: [
            {
              type: 'category',
              data: this.days,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
             {
               type: 'value',
               name: '',
               axisLabel: {
                 formatter: '{value} '
               }
             },
             {
               type: 'value',
               name: '',
               axisLabel: {
                 formatter: '{value}'
               }
             }
           ],
          series: this.bottomList,
        };
        this.bottomT.setOption(option,true)
      },
      // 获取ppm值
      async getPPM(){
        const res = await getDicts('qc_ppm')
        this.ppmList = res.data.map(item => item.dictValue)
        console.log('this.ppmList',this.ppmList)
      }
  },
  // 进入页面获取table信息
  async mounted() {
    await this.getPPM() 
    await this.handleFilter()
  }
}
</script>

<style>

.btn-add{
  margin-bottom: 28px;
}

.ul-item{
width: 85%;
}
</style>
